{% extends "base.html" %}

{% block content %}
    <div class="post-list">
        <!-- 显示当前搜索条件 -->
        {% if request.args.get('search') %}
            <div class="filter-tag">
                当前筛选:
                {% set field = request.args.get('field', 'title_summary') %}
                {{ field }} 匹配 "{{ request.args.get('search') }}"
                <a href="{{ url_for('index') }}" class="filter-tag-close">&times;</a>
            </div>
        {% endif %}

        <h2>帖子列表</h2>

        <div class="stats" style="position: relative;">
            <p>共 {{ total_posts }} 篇帖子</p>
            <!-- 新增搜索栏 -->
            <div class="search-bar" style="float: right; display: flex; align-items: center;">
                <select id="searchField" name="searchField" style="margin-right: 8px;">
                    <option value="title_summary">title+summary</option>
                    <option value="create_time">create_time</option>
                    <option value="predict">predict</option>
                </select>
                <input type="text" id="regexInput" placeholder="输入正则表达式（用';'分割多个OR条件）"
                       style="width: 300px;" onkeydown="handleEnter(event)">
            </div>
        </div>


        <!-- 卡片式帖子列表容器 -->
        <div class="post-cards">
            {% for post in posts %}
                <div class="post-card">
                    <!-- 第1栏：评论数和回复数 -->
                    <div class="post-stats">
                        <div>实际评论: {{ post['actual_comments'] }}</div>
                        <div>回复数: {{ post['reply_num'] }}</div>
                    </div>

                    <!-- 第2栏：标题和摘要 -->
                    <div class="post-title">
                        <div class="post-title-container">
                            <a href="{{ url_for('show_post', post_id=post['post_id']) }}" class="title-link">
                                {{ post['title'] }}
                            </a>
                            <div class="title-summary">{{ post['summary'] }}</div>
                        </div>
                    </div>
                    <!-- 第3栏：作者 -->
                    <div class="post-author">
                        {{ post['author_name'] }}
                    </div>

                    <!-- 第4栏：发帖时间 -->
                    <div class="post-time">
                        {{ post['create_time'] }}
                    </div>
                </div>
            {% endfor %}
        </div>

        <!-- 分页导航与跳转表单保持不变 -->
        {% include 'pagination.html' %}


    </div>
    <script>
        function handleEnter(event) {
            if (event.key === "Enter") {
                const regexInput = document.getElementById("regexInput").value;
                const searchField = document.getElementById("searchField").value;

                // 校验正则表达式是否有效
                try {
                    let patterns = regexInput.split(';').map(p => p.trim());
                    patterns.forEach(pattern => {
                        new RegExp(pattern);  // 测试正则表达式有效性
                    });

                    // 构造查询参数并跳转到新的搜索路径
                    const urlParams = new URLSearchParams();
                    urlParams.set('search', regexInput);
                    urlParams.set('field', searchField);
                    window.location.href = "{{ url_for('index') }}" + "?" + urlParams.toString();
                } catch (e) {
                    alert("请输入有效的正则表达式！");
                }
            }
        }
    </script>

{% endblock %}